<template>
  <!-- 购物车头部组件 -->
  <div id="CartTop">
    <catrtop />
  </div>
  <!-- 订单主页面 -->
  <div style="display: flex; flex-direction: column; align-items: center;" id="Catalog">
    <table style="width: 60%; background-color: #e9e9e9; border-collapse: collapse;" class="table-container">
      
      <thead>
        <tr>
          <th colspan="2">Order</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Order Date:</td>
          <td>{{ formattedOrderDate }}</td>
        </tr>
        <tr>
          <th colspan="2">Billing Address</th>
        </tr>
        <tr>
          <td>First name:</td>
          <td>{{ orderData.billToFirstName }}</td>
        </tr>
        <tr>
          <td>Last name:</td>
          <td>{{ orderData.billToLastName }}</td>
        </tr>
        <tr>
          <td>Address 1:</td>
          <td>{{ orderData.billAddress1 }}</td>
        </tr>
        <tr>
          <td>Address 2:</td>
          <td>{{ orderData.billAddress2 }}</td>
        </tr>
        <tr>
          <td>City:</td>
          <td>{{ orderData.billCity }}</td>
        </tr>
        <tr>
          <td>State:</td>
          <td>{{ orderData.billState }}</td>
        </tr>
        <tr>
          <td>Zip:</td>
          <td>{{ orderData.billZip }}</td>
        </tr>
        <tr>
          <td>Country:</td>
          <td>{{ orderData.billCountry }}</td>
        </tr>
        <tr>
          <th colspan="2">Shipping Address</th>
        </tr>
        <tr>
          <td>First name:</td>
          <td>{{ orderData.shipToFirstName }}</td>
        </tr>
        <tr>
          <td>Last name:</td>
          <td>{{ orderData.shipToLastName }}</td>
        </tr>
        <tr>
          <td>Address 1:</td>
          <td>{{ orderData.shipAddress1 }}</td>
        </tr>
        <tr>
          <td>Address 2:</td>
          <td>{{ orderData.shipAddress2 }}</td>
        </tr>
        <tr>
          <td>City:</td>
          <td>{{ orderData.shipCity }}</td>
        </tr>
        <tr>
          <td>State:</td>
          <td>{{ orderData.shipState }}</td>
        </tr>
        <tr>
          <td>Zip:</td>
          <td>{{ orderData.shipZip }}</td>
        </tr>
        <tr>
          <td>Country:</td>
          <td>{{ orderData.shipCountry }}</td>
       </tr>
      </tbody>
    </table>
    <el-button type="success" @click="confirm">Confirm</el-button>
  </div>
  <!-- 购物车底部组件 -->
  <div id="CartBottom">
    <cartbottom />
  </div>
</template>

<script setup>
import { onMounted, ref,computed } from 'vue';
import { useRoute } from 'vue-router';
import catrtop from '../components/CartPageTop.vue';
import cartbottom from '../components/CartPageBottom.vue';
import axios from 'axios'; // 假设你已经安装了axios;
import router from '../router';

const route = useRoute();

const orderData = ref({});
const lineItems = ref([]);

onMounted(() => {
  try {
    //const data = JSON.parse(decodeURIComponent(route.query.orderData));
    orderData.value = JSON.parse(decodeURIComponent(route.query.orderData));
    lineItems.value = JSON.parse(decodeURIComponent(route.query.lineItems));
  } catch (e) {
    console.error('解析订单数据失败:', e);
  }
});

const formattedOrderDate = computed(() => {
  const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true };
  const date = new Date(orderData.value.orderDate);
  return date.toLocaleString('en-US', options);
});
//点击跳转，带参数
const confirm = async () => {
    const orderId = orderData.value.orderId; // 假设订单ID是通过路由参数传递的
    console.log("拿回的orderid：", orderId);

    router.push({
        path: '/orderdetail',
        query: {
            orderId: orderId
        }
    }); 
};
</script>

<style scoped>
/* 你可以加点美化样式 */
#Catalog {
 
  margin-bottom: 15vh;
}

.table-container {
  width: 60%;
  background-color: #e9e9e9;
  border-collapse: collapse;
  border: 3px white;
  
}

.table-container th{
  font-size: 25px;
  font-weight: 900;
  text-align: left;
}
.table-container td {
  border: 2px solid white;
  padding: 8px;
  text-align: left;
  font-size: 25px;
}

</style>